<template>
  <div id="app">
    <el-container>
      <!-- 顶部导航栏(内含注册模块) -->
      <TopBar></TopBar>

      <!-- 顶栏容器 -->
      <el-header>
        <HeadBar :HeadActive="HeadActive"></HeadBar>
      </el-header>

      <!-- 主要区域容器 -->
      <el-main>
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </el-main>
      <el-footer>
        <!-- 底栏容器 -->
        <FootDiv></FootDiv>
      </el-footer>

      <!-- 登陆模块 -->
      <MyLogin></MyLogin>
    </el-container>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { mapGetters } from "vuex";

import TopBar from "components/common/topbar/TopBar.vue";
import MyLogin from "components/common/myLogin/MyLogin.vue";
import HeadBar from "components/content/headBar/HeadBar.vue";
import FootDiv from "components/common/footDiv/FootDiv.vue";

export default {
  name: "App",
  beforeUpdate() {
    // 头部活跃Index
    this.HeadActive = this.$route.path;
  },
  created() {


    // 头部活跃Index
    this.HeadActive = this.$route.path;
  },
  components: {
    TopBar,
    MyLogin,
    HeadBar,
    FootDiv
  },
  data() {
    return {
      HeadActive: ""
    };
  },
  methods: {
    registerShow() {
      this.register = true;
    }
  }
};
</script>

<style>
/* 全局css */
@import "~assets/css/global.css";
#app {
  width: 100%;
}
.TopBar {
  width: 100%;
}
</style>
